iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

30天小老闆系列(1)--線上排班小工具系列 第 22

DAY22 搞樣式--CSS Gird小進階(對齊)

  • 分享至 

  • xImage
  •  

前言

CSS Gird 給我們非常大的彈性,我們可以決定元件(item)要在容器(Container)中的哪個位置之外,還可以決定元件(item)要如何對齊。
而且對齊的功能也設置的很彈性,我們可以選擇在容器(Container)設定所有元件(item)統一的對齊方式,也可以為個別的元件設立屬於他們自己的對齊方式,那一樣直接讓我們來試看看吧!
https://ithelp.ithome.com.tw/upload/images/20210922/20136833KJb55TmlnF.jpg

水平修改

  • 容器(Container)統一修改請配置 justify-items
  • 元件(item)個別特製請配置 justify-self

我們可以配置以下四種屬性:

  1. start:startLine,對齊起始線
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833KJb55TmlnF.jpg

  2. end:endLine,對齊終點線
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833HVFArm8cDm.jpg

  3. center:center,對齊中間
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833yE6cGFTXvp.jpg

  4. stretch:延展填滿整個元件(item)(預設屬性)
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833jsqXzrwYls.jpg

垂直修改

  • 容器(Container)統一修改請配置 align-items
  • 元件(item)個別特製請配置 align-self

一樣可以配置以下四種屬性:

  1. start:startLine,對齊起始線
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833KJb55TmlnF.jpg

  2. end:endLine,對齊終點線
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833tI81q9vSfz.jpg

  3. center:center,對齊中間
    https://ithelp.ithome.com.tw/upload/images/20210922/2013683323eZ15YIDU.jpg

  4. stretch:延展填滿整個元件(item)(預設屬性)
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833glDFAbOMtd.jpg

簡單範例

  • 所有元件(item)水平/垂直都置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833aYQnpLuEad.jpg
    我們可以這樣寫:
.container {
  justify-items: center;
  align-items: center;
}
  • 個別元件(item)水平/垂直都置中對齊
    https://ithelp.ithome.com.tw/upload/images/20210922/20136833swX76EqtqH.jpg
    我們可以這樣寫:
.itemA {
  justify-self: center;
  align-self: center;
}

懶人補充

有沒有覺得水平/垂直要分開寫兩行很麻煩的人?請舉手!
好唷恭喜你,懶人縮寫來了,我們來只寫一行吧!

  • 容器(Container)統一修改請配置 place-items
  • 元件(item)個別特製請配置 place-self

垂直水平置中直接寫:

.container{
    place-items: center;
}

阿捏有沒有簡單?

  • 如果只設定一個值,就會同時設定垂直 align-items 跟水平 justify-items 兩個屬性
  • 如果放兩個值, 前面是垂直 align-items 屬性/後面是水平 justify-items 屬性

像這樣就是垂直置中,水平置尾

.container{
    place-items: center end;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20136833srvBpewElk.jpg

這樣有沒有很簡單呢?
恭喜大家今天會 CSS Gird 對齊囉!可喜可賀!
明天見囉!


上一篇
DAY21 搞樣式--CSS Gird小進階(Template Area)
下一篇
DAY23 搞樣式--CSS Gird小進階(間隔/fr)
系列文
30天小老闆系列(1)--線上排班小工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言